<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06_事件监听</title>
</head>
<body>
    <button onclick="alert('点击了按钮1')">按钮1</button>
    <button id="btn">按钮2</button>
    <hr>
    <h4>今天星期三</h4>
    <span>震惊:最强台风来袭....</span>
    <h4>明天星期四</h4>
    <div>
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis distinctio eaque earum ex harum maxime
            nulla numquam, quas repellat velit. Accusamus culpa dolor doloremque eaque iusto laudantium nobis placeat
            veritatis.
        </div>
        <div>Aut commodi doloribus dolorum eaque, error esse iusto laudantium maxime minus neque odit omnis, pariatur
            quisquam quo recusandae repellat, saepe velit. Asperiores, cum eos esse eum necessitatibus nobis quasi
            voluptas.
        </div>
        <div>Consequuntur cumque doloremque dolorum eaque exercitationem inventore ipsa magnam, modi molestias, nam non
            numquam placeat, possimus similique sint ut vero. Ad at commodi modi neque nesciunt quidem reprehenderit
            saepe suscipit!
        </div>
        <div>Eveniet fugit iusto nemo nihil optio placeat quidem velit voluptate? Cumque cupiditate doloremque eos
            explicabo fugiat, incidunt labore laboriosam laudantium nemo neque nisi odio pariatur quam recusandae
            repellat sit vitae!
        </div>
        <div>Ab ad aliquam animi aut dolorem excepturi fugit magnam odit perferendis quisquam rem, reprehenderit rerum
            sed soluta tempore vero voluptate. Eligendi enim explicabo nam necessitatibus optio ratione similique
            tenetur voluptatibus.
        </div>
        <div>Deserunt doloremque est facilis minima possimus quam quis quos, soluta. Aliquid aperiam aspernatur corporis
            dicta eveniet, exercitationem inventore minima nam nulla odio, praesentium, quam quibusdam rem sed soluta
            sunt vel?
        </div>
        <div>Ad aperiam assumenda autem cum est obcaecati possimus quis soluta vel veritatis! Asperiores aspernatur
            autem deleniti deserunt, dignissimos dolor ex expedita illo ipsam, labore numquam, quas reiciendis saepe
            tempora voluptas!
        </div>
        <div>Accusamus, ad eaque enim est explicabo illum iure iusto minus natus, nemo odio omnis reprehenderit vitae!
            Autem cumque deleniti, facere, nisi numquam officia placeat quasi quibusdam quisquam repellat, rerum vitae!
        </div>
        <div>Ab asperiores commodi deleniti dicta distinctio dolores excepturi facere illo ipsum nam nihil placeat, quam
            reiciendis, sed, tempora. Accusamus error, eveniet illum impedit incidunt ipsum obcaecati qui repellat
            tenetur ullam!
        </div>
        <div>Dignissimos eligendi impedit, numquam officia porro repellendus reprehenderit tempora vel veniam voluptate?
            Accusamus culpa dignissimos, esse est exercitationem fuga iste iusto minima nisi officia, possimus
            reiciendis reprehenderit rerum similique, tenetur!
        </div>
        <div>Atque debitis eius excepturi in, inventore labore minus nisi quas quia similique sint voluptates? A aliquid
            assumenda fugiat id ipsum magni optio quaerat ratione, recusandae repudiandae sed, sit suscipit, vero!
        </div>
        <div>Accusamus architecto atque cum omnis repellendus? Ab dignissimos exercitationem explicabo labore vitae?
            Aliquam animi commodi dolores esse eum excepturi ipsa minima nisi quae sed. Asperiores libero optio
            perferendis sit tenetur?
        </div>
        <div>A ad aliquid atque beatae blanditiis, dolorum eos error expedita facilis fugit laboriosam maiores molestias
            nam nesciunt non optio quasi quos reprehenderit, rerum veritatis. Animi asperiores expedita sequi unde ut!
        </div>
        <div>Aliquam aperiam debitis deleniti, eos est eveniet, facilis fuga id ipsum, laudantium libero magni
            necessitatibus nemo nulla optio placeat praesentium quas quia quos recusandae reiciendis repudiandae sed
            sunt ut vero?
        </div>
        <div>Aperiam at consequuntur dolores, ducimus eaque exercitationem hic, in inventore ipsam magni, nostrum
            officia quaerat quasi repellat sed. Animi debitis dolores et ipsum rem repellat soluta temporibus? Dolorum,
            illo ratione!
        </div>
        <div>Accusantium amet, asperiores atque beatae delectus deleniti dolore doloribus ea error eum, ex fugiat fugit
            incidunt iure laboriosam libero molestiae mollitia nesciunt nisi placeat quod, ratione repudiandae sit
            soluta voluptas.
        </div>
        <div>Aliquid, consequuntur ipsa modi molestias neque non quos sapiente sed? Cum deserunt dicta distinctio
            ducimus est illo inventore, iure magnam minima nisi provident quis, tenetur voluptatem! Doloribus est nemo
            ullam.
        </div>
        <div>At beatae deserunt eaque iste nisi porro quis reprehenderit sequi suscipit? Atque consequuntur et excepturi
            hic magni maxime minus molestias numquam odio possimus, quidem rem repellat repudiandae sed totam unde.
        </div>
        <div>Aut corporis cum dicta doloremque dolorum, ducimus ea eaque error eveniet facilis fugit hic illum inventore
            iusto laudantium nostrum obcaecati officia quas qui quidem ratione suscipit veniam veritatis vero
            voluptatibus!
        </div>
        <div>Deserunt dolorem exercitationem porro voluptates! Consequatur dolorem dolores eius, inventore iusto,
            maiores omnis praesentium quidem quis quisquam ratione repellat saepe voluptates? Accusamus consequatur
            consequuntur deleniti, facere nesciunt placeat quia reprehenderit?
        </div>
        <div>Maxime obcaecati, porro. Atque eveniet expedita nulla quas quibusdam, soluta temporibus. Ab adipisci
            aliquam, asperiores dolor dolores eaque earum est illo molestiae necessitatibus officia perferendis qui
            quod, ratione tempora vero.
        </div>
        <div>Autem deleniti doloribus eligendi facere harum minima minus nulla optio perferendis praesentium quae, quod
            repudiandae sint ut voluptates! Deleniti dolor dolorem earum esse fuga iste modi porro reiciendis soluta
            voluptatum.
        </div>
        <div>Assumenda ducimus, eaque in laudantium nulla officia quia reiciendis rerum. A cum eius, ex ipsa magni
            mollitia odit quasi sapiente similique. Architecto laborum libero maiores minima optio quos sunt, suscipit.
        </div>
        <div>Alias culpa ex harum, minima possimus repellat reprehenderit rerum soluta suscipit temporibus! Alias
            aliquam architecto corporis, cupiditate magnam magni nesciunt officiis porro quis sequi. Ea expedita ipsum
            quibusdam reprehenderit ut!
        </div>
        <div>Alias, aspernatur deserunt dolor dolorem eum exercitationem facere impedit iste minus molestiae neque nulla
            numquam officiis perspiciatis quaerat quas, quo quod rem repellat vel? Deserunt ipsum odio optio quidem sed?
        </div>
        <div>Asperiores ea, facilis ipsam magni maxime repellat voluptate. Ad assumenda beatae delectus, deserunt dolor
            dolorem doloremque exercitationem facilis illo incidunt laudantium, molestiae neque nobis numquam optio
            quaerat quibusdam ratione ut!
        </div>
        <div>Animi asperiores beatae debitis eligendi eos error fugiat impedit iste labore, laudantium magni mollitia
            nostrum possimus quibusdam quidem sapiente sed sunt? Ad deleniti deserunt eveniet facere inventore
            praesentium totam unde?
        </div>
        <div>Accusamus atque deserunt dicta enim inventore labore quaerat recusandae reiciendis saepe sunt. Ad iusto
            perspiciatis repudiandae vero! At cupiditate dignissimos illo minus, placeat quidem saepe temporibus.
            Consequatur excepturi labore quibusdam?
        </div>
        <div>Adipisci at aut consequatur culpa debitis dicta distinctio dolor enim error eveniet harum illum incidunt
            maxime natus nisi odit pariatur possimus praesentium quas qui, recusandae rem sequi similique temporibus
            vel.
        </div>
        <div>Atque blanditiis commodi fugit illo labore ratione sed sit temporibus? Dolorem, eligendi eos error esse et
            expedita facere itaque, maxime odit optio provident quas quibusdam reprehenderit sapiente sequi totam
            voluptatum.
        </div>
        <div>At aut expedita harum maxime modi nisi obcaecati placeat quaerat, quam similique sunt ullam! Beatae
            corporis odit quas similique suscipit. Architecto aspernatur consequatur doloribus necessitatibus omnis
            repellendus tempore vitae voluptatem.
        </div>
        <div>Ipsum maiores, molestias necessitatibus quia quis recusandae repellendus sint! Ab consequatur culpa et
            illum omnis pariatur quia sequi, soluta. Consequatur eveniet iure minima molestiae numquam qui quod ratione
            rerum saepe.
        </div>
        <div>Commodi cum facilis id odit veritatis. Accusamus aperiam culpa et eveniet quas quia voluptatibus. Amet
            aperiam impedit incidunt ipsum nisi, nulla? At consequuntur doloremque eum facere impedit officia, provident
            vel!
        </div>
        <div>Assumenda, consectetur culpa dolore doloremque dolores ea, eos ex expedita iure nam nesciunt officia omnis
            provident qui ratione repudiandae ullam. Architecto debitis eaque, fuga laboriosam nisi recusandae repellat?
            Fuga, quis.
        </div>
        <div>Aliquid aperiam autem cumque cupiditate delectus doloremque dolores eius error eum eveniet laudantium
            minima perspiciatis, possimus provident quaerat quas quasi quidem quos similique temporibus, vero voluptatem
            voluptatibus! Commodi, fugiat, quis!
        </div>
        <div>Architecto aut cumque, eligendi error harum in necessitatibus nemo nobis omnis pariatur quae rem sint sit
            tempore voluptatibus. Alias architecto distinctio esse exercitationem nulla optio possimus? Consequuntur id
            officia vitae!
        </div>
        <div>Ab accusamus alias corporis cum cumque dicta dignissimos eius enim eos eum explicabo itaque modi mollitia,
            neque quibusdam quidem quisquam reiciendis sapiente sunt vel? Aspernatur doloribus enim illo placeat
            repellat?
        </div>
        <div>Dicta in inventore necessitatibus nisi omnis quae sequi sit vero. Ab adipisci architecto doloremque nostrum
            qui rem repudiandae sequi voluptatibus? Assumenda deserunt dolore id in nam necessitatibus repellat
            reprehenderit saepe!
        </div>
        <div>A, architecto asperiores beatae commodi dicta dolore, expedita fugit in incidunt ipsam laudantium libero
            maiores mollitia nemo numquam odit ratione saepe sequi sunt tempora ullam unde ut veritatis voluptates
            voluptatum.
        </div>
        <div>Debitis deserunt dicta earum eos, fugit, id ipsum magni natus nisi optio porro quam quis rem ullam
            voluptatum. Cumque cupiditate deserunt dicta distinctio dolore enim impedit non pariatur porro voluptas.
        </div>
        <div>At autem, dolorem ducimus eligendi et expedita maiores modi odio, perferendis quam recusandae reiciendis
            rerum similique tempora veniam vero voluptate! Ad facere, quis! Cum incidunt officiis quis suscipit ut vel?
        </div>
        <div>Dolor doloribus eius esse, fugiat itaque libero perferendis quaerat quas quia quo repellendus, voluptate.
            Consectetur deleniti laborum molestiae placeat! Ad atque debitis, impedit ipsum itaque molestias quae rerum
            tempore voluptas?
        </div>
        <div>Aliquam amet aperiam aspernatur aut consectetur consequuntur distinctio doloremque dolores doloribus eaque,
            eos eveniet ipsa laudantium maxime minima nulla officia, perspiciatis possimus quaerat ratione reiciendis
            rem veritatis, vero voluptate voluptatem.
        </div>
        <div>Dicta molestiae neque ratione reiciendis sequi? Animi debitis eos eveniet labore veritatis? Consectetur ea
            eligendi esse illo magnam molestiae nobis officiis reprehenderit. Adipisci at corporis cupiditate dolor
            necessitatibus sed sequi.
        </div>
        <div>Amet aperiam assumenda, blanditiis dolorum earum eveniet ex excepturi expedita harum impedit laborum odio
            quos recusandae saepe sunt, vero voluptatem. Aut, dolorum excepturi fuga iste nostrum quae suscipit. Ad,
            aliquam!
        </div>
        <div>Aliquam esse fugiat hic iure nesciunt perferendis voluptas voluptates! Ad assumenda, dolores et, ex
            exercitationem facere harum id laborum, libero maiores maxime nihil nostrum perspiciatis quisquam sapiente
            vel velit vero.
        </div>
        <div>Accusantium alias aperiam asperiores assumenda blanditiis consectetur culpa expedita, impedit incidunt
            laudantium placeat possimus quibusdam quidem quos saepe sint sit sunt! Aliquam aut autem consequuntur
            eveniet mollitia nemo quod saepe.
        </div>
        <div>Adipisci alias deserunt distinctio ea eum incidunt ipsam itaque laudantium nobis numquam, odio odit porro
            praesentium quas quidem reprehenderit ut veniam. Animi corporis laboriosam nobis odio optio quas quisquam
            reprehenderit.
        </div>
        <div>Consectetur dignissimos impedit laborum quaerat quam quo similique ullam. A adipisci amet aut autem
            consectetur, consequuntur dolore doloribus facilis harum iure laudantium nisi non nulla numquam recusandae
            rerum sint, sunt?
        </div>
        <div>Dolore eveniet facilis ipsa odit, officia quos recusandae tempora ullam vitae voluptatibus. Consequuntur
            exercitationem obcaecati quisquam reprehenderit, totam voluptas voluptate? Cupiditate dolore hic illo in
            inventore iste provident quibusdam ratione?
        </div></div>

    <script>
        window.addEventListener('scroll',function () {
            console.log('页面被滚动了！')
        })
        window.addEventListener('resize',function () {
            console.log('页面大小被调整了！')
        })


        let spanE = document.querySelector('span');
        spanE.addEventListener('mouseover',function (){
            console.log('改标题被查看了！');
        })


        let btnE = document.getElementById('btn');
        btnE.addEventListener('click',function (){
            alert('点击了按钮2');
        })
    </script>







</body>
</html>